<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item index="0">
        <b @click="home_page()">LOGO</b>
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1"><span @click="ZhanShi()">展示大屏</span></el-menu-item>

      <el-sub-menu index="2" v-if="store.loginStatus === false">
        <template #title>个人信息</template>
        <el-menu-item index="2-1" @click="login_">登录</el-menu-item>
        <el-menu-item index="2-2" @click="register_">注册</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2" v-else>
        <template #title>个人信息</template>
        <el-menu-item index="2-1">个人中心</el-menu-item>
        <el-menu-item index="2-2" @click="outLogin()">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from "@/router";
import {UserLoginStore} from "@/stores/counter";
import {ElMessage} from "element-plus";

// 常用值
const store = UserLoginStore()

// 页首
const activeIndex = ref('0')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

// 路由跳转
const home_page = () => {
  router.replace({name: 'Home'})
}
const ZhanShi = () => {
  router.replace({name: 'ZS'})
}
const login_ = () => {
  router.replace({name: 'Login'})
}
const register_ = () => {
  router.replace({name: 'Register'})
}

// 退出登录
function outLogin() {
  store.loginStatus = false
  localStorage.removeItem('token')
  console.log(localStorage.getItem('token'))
  ElMessage({message: '退出登录成功', type: 'success'})
  sessionStorage.removeItem("username");   // 用户注销，清除存在session中的username
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
